<div id="adv_{$pos.id}" class="adv-wrap" style="padding: {$pos.padding};margin:{$pos.margin};">
    <div >
        <if condition="count($list) gt 0">
            <switch name="pos.style">
                <case value="2">
                    <!--轮播效果2-->
                    <script src="__PUBLIC__/lib/kinmaxshow/js/kinmaxshow.min.js"></script>
                    <div>
                        <div id="slide_{$pos.id}" style="display: none">
                            <volist name="list" id="vo">
                                <div>
                                    <a href="{$vo.url}" target="_blank" title="{$vo.title}">
                                        <img src="{$vo.pic|pic}"
                                             alt="{$vo.title}" class="img-responsive" >
                                    </a>
                                </div>
                            </volist>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            var h_s = "{$pos.height}";
                            var w_s = "1160px";
                            $("#slide_{$pos.id}").kinMaxShow({
                                height: h_s,
                                button:{
                                      //设置按钮上面不显示数字索引(默认也是不显示索引)
                                      showIndex:false,
                                      //按钮常规下 样式设置 ，css写法，
                                      //类似jQuery的 $('xxx').css({key:value,……})中css写法。  
                                      //【友情提示：可以设置透明度哦 不用区分浏览器
                                      //统一为 opacity，CSS3属性也支持哦
                                      //如：设置按钮圆角、投影等，只不过IE8及以下不支持】  
                                      normal:{background:'#fff',
                                      marginRight:'8px',border:'0',right:'50%',bottom:'30px'},
                                      //当前焦点图按钮样式 设置，写法同上
                                      focus:{background:'#f60',border:'0'}
                                },
                                callback:function(index,action){
                                           
                                               
                                }
                            });
                            var w_a = "KMSPrefix_slide_{$pos.id}_image_item";
                            $("." +w_a + " a").css({"width": w_s,"margin":"0 auto"});
                            $("#slide_{$pos.id}").fadeIn();
                        })
                    </script>
                    <!--轮播效果2END-->
                </case>
                <case value="3">
                    <!--轮播效果3 Flickity 风格 START-->
                    <style>
                        .flickity-content {
                            max-width:1600px;
                            margin:0 auto;
                        }
                        .gallery-cell {
                            width:100%;
                            height:auto;
                            overflow:hidden;
                        }
                        .gallery-cell a img {
                            width:100%;
                        }
                    </style>
                    <link href="__PUBLIC__/lib/flickity/css/flickity.css" rel="stylesheet" media="screen">
                    <script src="__PUBLIC__/lib/flickity/js/flickity.pkgd.min.js"></script>
                      <div id="slide_{$pos.id}">
                        <div class="flickity-content js-flickity" id="main-gallery" data-flickity-options='{ "cellAlign": "left", "contain": true,"autoplay": true,"wrapAround": true}'>
                            <volist name="list" id="vo">
                                <div class="gallery-cell">
                                    <a href="{$vo.url}" target="_blank" title="{$vo.title}">
                                        <img src="{$vo.pic|pic}"
                                             alt="{$vo.title}" class="img-responsive" >
                                    </a>
                                </div>
                            </volist>
                        </div>
                      </div>
                    <!--轮播效果3END-->
                </case>


                <default />
                    <!--默认轮播效果-->
                <link href="__PUBLIC__/lib/simpleSlider/style.css" rel="stylesheet" type="text/css">
                <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
                <script type="text/javascript" src="__PUBLIC__/lib/simpleSlider/js/transit.js"></script>
                <script type="text/javascript" src="__PUBLIC__/lib/simpleSlider/js/touchSwipe.js"></script>
                <script type="text/javascript" src="__PUBLIC__/lib/simpleSlider/js/simpleSlider.js"></script>
                <script type="text/javascript" src="__PUBLIC__/lib/simpleSlider/js/backstretch.js"></script>
                <script>
                var mainslider;
                $(document).ready(function(){
                    var options = {
                        slides: '.slide', // The name of a slide in the slidesContainer
                        swipe: true,    // Add possibility to Swipe > note that you have to include touchSwipe for this
                        slideTracker: true, // Add a UL with list items to track the current slide
                        slideTrackerID: 'slideposition', // The name of the UL that tracks the slides
                        slideOnInterval: false, // Slide on interval
                        interval: 9000, // Interval to slide on if slideOnInterval is enabled
                        animateDuration: 1000, // Duration of an animation
                        animationEasing: 'ease', // Accepts: linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack
                        pauseOnHover: false // Pause when user hovers the slide container
                    };

                    $(".slider").simpleSlider(options);
                    mainslider = $(".slider").data("simpleslider");
                    /* yes, that's all! */

                    $(".slider").on("beforeSliding", function(event){
                        var prevSlide = event.prevSlide;
                        var newSlide = event.newSlide;
                        $(".slider .slide[data-index='"+prevSlide+"'] .slidecontent").fadeOut();
                        $(".slider .slide[data-index='"+newSlide+"'] .slidecontent").hide();
                    });

                    $(".slider").on("afterSliding", function(event){
                        var prevSlide = event.prevSlide;
                        var newSlide = event.newSlide;
                        $(".slider .slide[data-index='"+newSlide+"'] .slidecontent").fadeIn();
                    });
                    <volist name="list" id="vo">
                    $(".slide#ad_{$vo.id}").backstretch("{$vo.pic|pic}");
                    </volist>

                    $('.slide .backstretch img').on('dragstart', function(event) { event.preventDefault(); });

                    $(".slidecontent").each(function(){
                        $(this).css('margin-top', -$(this).height()/2);
                    });
                });
                $(function(){
                    var largeHeader = document.getElementById('fullscreen');
                    var width = window.innerWidth;
                    var height = window.innerHeight;
                    largeHeader.style.height = height+'px';
                    window.addEventListener('resize', resize);
                    function resize() {
                        var width = window.innerWidth;
                        var height = window.innerHeight;
                        largeHeader.style.height = height+'px';
                        canvas.width = width;
                        canvas.height = height;
                    }
                })

                </script>
                <div class='pagewrap'>
            
                <div class='pageblock' id='fullscreen'>
                    <div class='slider'>
                    <volist name="list" id="vo">
                        <div class='slide' id="ad_{$vo.id}">
                            <div class='slidecontent'>
                                <h1>{$vo.title}</h1>
                                <p>{$vo.description}</p>
                                <div class="btn btn-success btn-lg" onclick="mainslider.nextSlide();">Done? Let's move on!</div>
                            </div>
                        </div>
                    </volist>
                        
                    </div>
                </div>
                </div>
                </div>
            </switch>
        </if>

    </div>
</div>
